<template>
  <BasicModal :show="show" title="新增评价" width="30%" :widthComfirm="true" @comfirm="comfirm">
    <template #content>
      <a-form ref="formRef" :model="form" :rules="rules" :label-col="{ style: { width: '100px', textAlign: 'right' } }">
        <a-form-item label="状态" name="status">
          <a-select v-model:value="form.status" show-search :filter-option="filterOption">
            <a-select-option :value="item.value" v-for="item in statusList" :key="item.label">{{ item.label
              }}</a-select-option>
          </a-select>
        </a-form-item>
        <a-form-item label="评价" name="comment">
          <a-textarea v-model:value="form.comment" :autoSize="{ minRows: 4, maxRows: 4 }" />
        </a-form-item>
      </a-form>
    </template>

  </BasicModal>
</template>

<script setup lang='ts'>
import { ref } from "vue"
import type { Rule } from 'ant-design-vue/es/form';
import BasicModal from "./BasicModal.vue";
const show = ref<boolean>(false);

const form = ref({
  status: "",
  comment: ""
})
const rules: Record<string, Rule[]> = {
  comment: [{ required: true, message: '请填写评价', trigger: 'change' }],
  status: [{ required: true, message: '请选择状态', trigger: 'change' }],
};
const filterOption = (input: string, option: any) => {
  return option.key.toLowerCase().indexOf(input.toLowerCase()) >= 0;
};
const statusList = ref<{ label: string; value?: string | number }[]>([
  { label: "简历-待筛选" },
  { label: "简历-淘汰" },
  { label: "面试-待约面" },
  { label: "面试-待约面-放弃" },
  { label: "面试-待面试" },
  { label: "面试-待面试-放弃" },
  { label: "面试-到面" },
  { label: "面试-到面-放弃" },
  { label: "面试-到面-淘汰" },
  { label: "培训-待约" },
  { label: "培训-待约-放弃" },
  { label: "培训-待培" },
  { label: "培训-预约邮件已发送" },
  { label: "培训-预约邮件已发送-放弃" },
  { label: "培训-培训中" },
  { label: "培训-培训中-放弃" },
  { label: "培训-培训中-淘汰" },
  { label: "培训-考核" },
  { label: "培训-考核-放弃" },
  { label: "培训-考核-淘汰" },
  { label: "签约-待发offer" },
  { label: "签约-待签应约" },
  { label: "签约-待签应约-放弃" },
  { label: "签约-待签三方" },
  { label: "签约-待签三方-放弃" },
  { label: "签约-二次面试" },
  { label: "签约-二次面试-通过" },
  { label: "签约-二次面试-放弃" },
  { label: "签约-二次面试-淘汰" },
  { label: "入职-待入职" },
  { label: "入职-待入职-放弃" },
  { label: "入职-实习中" },
  { label: "入职-实习中-放弃" },
  { label: "入职-实习中-淘汰" },
  { label: "入职-试用中" },
  { label: "入职-试用中-放弃" },
  { label: "入职-试用中-淘汰" },
  { label: "入职-已转正-应届" },
]);
statusList.value.forEach((el, idx) => {
  el.value = idx + 1 + ""
})
const formRef = ref<any>(null)

const comfirm = async () => {
  const res = await formRef.value.validate();
  if (!res) return;
  formRef.value.resetFields();
}
defineExpose({ show })
</script>

<style lang="less" scoped>
.progress {
  display: flex;
  justify-content: end;
  margin: 24px 0;
  padding-top: 24px;
  ;
  font-weight: 400;
  font-size: 14px;
  color: #333333;

  .desc {

    font-weight: 400;
    font-size: 14px;
    color: #209EE4;

  }
}
</style>